<template>
    <v-row justify="center">
        <v-dialog v-model="dialog" fullscreen :scrim="false" transition="dialog-bottom-transition">
            <!-- <template v-slot:activator="{ props }">
                <v-btn color="primary" dark v-bind="props">
                    Open Dialog
                </v-btn>
            </template> -->
            <v-card>
                <v-toolbar dark color="primary">
                    <v-btn icon dark @click="dialog = false">
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                    <v-toolbar-title>{{labelBo.id!=undefined?'编辑我的标签':'创建我的标签'}}</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-toolbar-items>
                        <v-btn variant="text" @click="submit">
                            保存
                        </v-btn>
                    </v-toolbar-items>
                </v-toolbar>
                <v-form>
                    <v-container>
                        <v-row>
                            <v-text-field v-model="labelBo.name"  label="标签名称" required hide-details />
                        </v-row>
                        <v-row>
                            <p> &nbsp;</p>
                        </v-row>
                        <v-row>
                            <p>标签颜色</p>
                            <div class="d-flex justify-space-around">
                                <v-color-picker v-model="labelBo.color" hide-canvas hide-sliders></v-color-picker>
                                <!-- <v-color-picker v-model="c2" hide-inputs show-swatches></v-color-picker> -->
                            </div>
                        </v-row>
                        <v-row>
                            <p> &nbsp;</p>
                        </v-row>
                        <v-row>
                            <v-text-field v-model="labelBo.level" label="标签等级"></v-text-field>
                        </v-row>
                        <v-row>
                            <v-textarea v-model="labelBo.remark"  label="备注" required hide-details/>
                        </v-row>
                    </v-container>
                </v-form>
            </v-card>
        </v-dialog>
    </v-row>
    <v-snackbar v-model="snackbar">
        {{ text }}
        <template v-slot:actions>
            <v-btn color="pink" variant="text" @click="snackbar = false">
                关闭
            </v-btn>
        </template>
    </v-snackbar>
</template>
<script>
import { addLabel } from "@/api/label.js";
export default {
    name: 'LabelEdition',
    props:{
        callback:Function
    },
    data() {
        return {
            dialog: false,
            text:'',
            snackbar:false,
            notifications: false,
            sound: false,
            widgets: false,
            valid: false,
            labelBo:{
                id:undefined,
                name:undefined,
                level:undefined,
                color:undefined,
                remark:undefined
            }
        }
    },
    methods: {
        toggle(change,labelBo) {
            this.dialog = change
            if(labelBo!=undefined){
                this.labelBo=labelBo
            }
        },
        submit(){
            if(this.labelBo.labelId==undefined)this.addLabel()
        },
        addLabel(){
            addLabel(this.labelBo).then(resp=>{
                this.snackbar=true
                this.text=resp.msg
                if(this.labelBo)this.callback()
            })
        }
    }
}
</script>

<style scoped>
.dialog-bottom-transition-enter-active,
.dialog-bottom-transition-leave-active {
    transition: transform .2s ease-in-out;
}
</style>